<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    div,
    ul,
    li,
    ol,
    img,
    a {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    /* 轮播开始 */
    .lunbo {
      position: relative;
      width: 880px;
      height: 550px;
      border: 1px solid #ccc;
      margin: 20px auto;
    }

    /* 图片 */
    .lunbo .pic li {
      position: absolute;
      left: 0;
      top: 0;
      width: 880px;
      height: 550px;
      display: none;
    }

    .lunbo .pic .current {
      display: block;
    }

    /* 按钮 */
    .lunbo .btn a {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 40px;
      margin-top: 20px;
      background-color: rgba(255, 255, 255, .3);
      font: 20px/40px "宋体";
      text-align: center;
      color: #fff;
      font-weight: bold;
    }

    .lunbo .btn .leftBtn {
      left: 20px;
    }

    .lunbo .btn .rightBtn {
      right: 20px;
    }

    .lunbo .btn a:hover {
      background-color: rgba(255, 255, 255, .6);
    }

    /* 小圆点 下标 */
    .lunbo .sub {
      position: absolute;
      left: 100px;
      bottom: 50px;
      width: 240px;
    }

    .lunbo .sub li {
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      background-color: rgba(255, 255, 255, .3);
      font: 12px/20px "微软雅黑";
      text-align: center;
      color: #666;
      cursor: pointer;
    }

    .lunbo .sub .current {
      background-color: rgba(255, 255, 255);
    }
  </style>
</head>

<body>
  <div class="lunbo" id="lunbo">
    <!-- 图片部分 -->
    <ul class="pic" id="pic">
      <!-- li * 6 -->
      <li class="current">
        <a href="javascript:;">
          <img src="images/lunbo/c1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="images/lunbo/c2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="images/lunbo/c3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="images/lunbo/c4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="images/lunbo/c5.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="images/lunbo/c6.jpg" alt="">
        </a>
      </li>
    </ul>
    <!-- 按钮部分 -->
    <div class="btn">
      <a href="javascript:;" class="leftBtn" id="leftBtn">&lt;</a>
      <a href="javascript:;" class="rightBtn" id="rightBtn">&gt;</a>
    </div>
    <!-- 小圆点 -->
    <ol class="sub" id="sub">
      <!-- li * 6  -->
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ol>
  </div>


  <script src="js/common.js"></script>
  <script>
    // 1.获取元素
    var lunBo = my$("lunbo");
    var ul = my$("pic");
    var ulLis = pic.children;
    var leftBtn = my$("leftBtn");
    var rightBtn = my$("rightBtn");
    var ol = my$("sub");
    var olLis = ol.children;

    // 定义一个全部变量 保存当前展示图片的下标
    var index = 0;
    // 2.right点击事件
    addEvent(rightBtn, "click", rightHandle);

    // 3.left点击
    addEvent(leftBtn, "click", function () {
      index--;
      // 判断 index的值是否超过最小下标 
      // 如果超过 就 设置 index = ulLis的最大下标
      if (index < 0) {
        index = ulLis.length - 1;
      }
      // 调用切换函数
      change();
    });

    // 4.小圆点切换图片 
    for (var i = 0; i < olLis.length; i++) {
      // 设置一个自定义属性 存储每个li的下标
      olLis[i].index = i;
      // 给每一个li绑定点击事件
      addEvent(olLis[i], "click", function () {
        // 获取当前的下标 
        index = this.index;
        change();
      })
    }

    // 5.自动播放
    var timer;
    timer = setInterval(rightHandle, 1500);
    // 鼠标移入盒子停止播放 移出盒子继续播放
    addEvent(lunBo, "mouseover", function () {
      clearInterval(timer);
    });
    addEvent(lunBo, "mouseout", function () {
      timer = setInterval(rightHandle, 1500);
    });


    // 右按钮 点击函数
    function rightHandle() {
      index++;
      // 判断 index 有没有超过最大下标 如果超过就index = 0
      if (index > ulLis.length - 1) {
        index = 0;
      }
      // 调用切换函数
      change();
    }

    // current的切换函数
    function change() {
      // 排他思想 清除所有 设置当期那
      for (var i = 0; i < ulLis.length; i++) {
        ulLis[i].className = "";
        olLis[i].className = "";
      }
      ulLis[index].className = "current";
      olLis[index].className = "current";
    }
  </script>


</body>

</html>